<template>
  <h3>评论列表</h3>
  <div v-if="comments.length === 0">暂无评论</div>

  <div v-for="(comment, index) in comments" :key="index">
    评论人：<span>{{ comment.author }}</span
    >&nbsp;&nbsp;&nbsp;&nbsp; 评论内容：<span>{{ comment.content }}</span
    >&nbsp;&nbsp;&nbsp;&nbsp; 评论时间：<span>{{ comment.date }}</span>
  </div>
  <AddComment @add="addComment"></AddComment>
</template>

<script>
import AddComment from "./AddComment.vue";
export default {
  components: {
    AddComment,
  },
  data() {
    return {
      comments: [],
    };
  },
  methods: {
    addComment(comment) {
      this.comments.push(comment);
    },
  },
};
</script>

<style>
</style>